<template>
  <div class="content-footer clearfix">
    <div class="pre-article" v-show="config.isActivePre" @click="preAndNextevent(config,-1)"><span class="iconfont iconPrevious">上一页</span></div>
    <div class="next-article" v-show="config.isActiveNxet" @click="preAndNextevent(config,1)"><span class="iconfont iconNext">下一页</span></div>
  </div>

</template>

<script>
import {request} from "../../axios";

export default {
  name: "LimitControl",
  props:{
    config:{
      url:String,
      countUrl:String,
      pageNo:Number,
      pageSize:Number,
      totalCount:Number,
      receiveData:String,
      isActivePre:Boolean,
      isActiveNxet:Boolean,
    }
  },
  methods:{
    check(){
      var totalPage = Math.ceil(this.config.totalCount/this.config.pageSize);
      this.config.isActivePre = this.config.pageNo==1 ? false : true;
      this.config.isActiveNxet = this.config.pageNo >= totalPage  ? false : true;
    },
    getcount(){
     return  request({
        url:this.config.countUrl,
        method:'GET',
      })
    },
    preAndNextevent(config,status) {
      this.config.pageNo += status;
      this.check();
      request({
        url: config.url+`/${config.pageNo}/${config.pageSize}`,
        method:'GET'
      }).then(res=>{
       var dataList =  res.data.dataList;
       this.$emit(config.receiveData,dataList);
      }).catch(err=>{
        this.config.pageNo -= status;
      })
    }
  },
  mounted() {
    this.getcount().then(res=>{
      this.config.totalCount = res.data.count;
      this.preAndNextevent(this.config,1);
    });
  }
}
</script>

<style scoped>
.clearfix:after{
  content:"";
  display:block;
  visibility:hidden;
  clear:both;
}
.content-footer{
  width: 100%;
  margin-top: 5px;
}
.pre-article{
  float: left;
}
.next-article{
  float: right;
}
.content-footer >div{
  background-color: #41a8a5;
  border-radius: 5px;
  transition: .5s ease;
  box-shadow: 1px 1px 5px #41a8a5;
  cursor: pointer;
  padding: .5rem 0;
  margin: 0 1rem;
}
.pre-article:hover,.next-article:hover{
  transform: scale(1.1);
  background-color: yellow;
}
span{
  font-size: .9rem;
  padding: .5rem;
}
</style>